import React, { Component, createRef } from 'react';
//导入css文件
import "./Message.css"
class Message extends Component {
    //组件实例化对象身上，调用：this.ipt
    ipt = createRef(); // {current:null}
    state = {
        list: [
            '天王盖地虎',
            '宝塔镇河妖',
            '地振高冈，一派溪山千古秀',
            '门朝大海，三河合水万年流'
        ]  //状态数据一般字符串、布尔值、数字、数组
    }
    render() {
        //解构
        let { list } = this.state;
        return (
            <div>
                消息:<input type="text" ref={this.ipt} /> &nbsp; <button onClick={this.sendMessage}>发送消息</button>
                <hr />
                <div className='box' ref={el => this.box = el}>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }

    sendMessage = () => {
        //1、获取文本框中的数据
        let v = this.ipt.current.value;
        //2、修改state状态数据
        this.setState({
            list: [
                ...this.state.list,
                v
            ]
        })
    }

    componentDidUpdate() {
        //调整div的内容滚动的Top距离值
        // console.dir(this.box);
        this.box.scrollTop = 1000000;
    }
}

export default Message;